import { useState } from 'react'

const Statistics = (props) => {
  const {good,neutral,bad,all,average,positive} = props
  if(props.allClick === 0){
    return(
      <p>No feedback given</p>
    )
  }
  return (
    <div>
      <p>
      good: {good}<br></br>
      neutral: {neutral}<br></br>
      bad: {bad}<br></br>
      all: {all}<br></br>
      average: {average}<br></br>
      positive: {positive}%<br></br>
      </p>
    </div>
  )
}

const App = () => {
  // save clicks of each button to its own state
  const [good, setGood] = useState(0)
  const [neutral, setNeutral] = useState(0)
  const [bad, setBad] = useState(0)
  const [allClick,setAll]=useState(0)
  const all = good + neutral + bad
  const average = (good - bad) / all
  const positive = (good / all) * 100
  
  return (
    <div>
      <h1>give feedback</h1>
      <button onClick={()=>{setGood(good+1);setAll(allClick+1)}}
      >good</button>
      <button onClick={()=>{setNeutral(neutral+1);setAll(allClick+1)}}
      >neutral</button>
      <button onClick={()=>{setBad(bad+1);setAll(allClick+1)}}
      >bad</button>
      <h1>statistics</h1>
      <button onClick={()=>{setAll(0);setBad(0);setGood(0);setNeutral(0)}}>reset</button>
      <p></p>
       <Statistics 
      good={good} 
      neutral={neutral} 
      bad={bad} 
      all={all}
      average={average}
      positive={positive.toFixed(1)}
      allClick = {allClick}
      />
    </div>
  )
}

export default App